<template>
	<view class="lease-contract-download">
		<u-image 
		  class="image--demo"
		  width="460" 
		  height="306" 
		  border-radius="10px"
		  src="/bundle/static/images/contract_download.jpeg" 
		/>
		<view class="explain">示例</view>
		
		<!-- Tips -->
		<view class="tips">点击一键复制，打开【浏览器】粘贴链接下载文件</view>
		
		<!-- Copy URL -->
		<view class="button--copy" @tap="onCopyURL">一键复制</view>
	</view>
</template>


<script>
	import { copy } from '@/utils/tools'
	
	export default {
		data() {
			return {
				contractDownloadURL: '',		// 合同下载地址
			}
		},
		
		methods: {
			// 复制下载链接
			onCopyURL() {
				copy(this.contractDownloadURL)
				// uni.setClipboardData({ data: this.contractDownloadURL });
				setTimeout(() => uni.navigateBack(), 500);
			},
		},
		
		onLoad(options) {
			this.contractDownloadURL = options.url ?? '';
		}
	}
</script>


<style scoped>
	.lease-contract-download {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		padding: 30rpx 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	
	.image--demo {
		border-radius: 10px;
		box-shadow: 0 0 8px 1px rgba(0, 0, 0, .3);
	}
	
	.explain {
		padding: 10rpx;
		font-size: 36rpx;
		color: #888888;
	}
	
	.tips {
		width: 100%;
		padding: 30rpx;
		margin: 30rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 10px;
		background-color: #E0EEF7;
		color: #24A3FF;
	}
	
	.button--copy {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 82rpx;
		margin-top: 20rpx;
		border-radius: 50px;
		background-color: #24A3FF;
		color: #FFFFFF;
	}
</style>
